<template>
  <section style="height: 100%;background: #fff;">
    <img src="../../assets/carlist/carResult.png" class="banner">
    <div class="choose_tip">
      <img src="../../assets/api/in.png">
      <span>车牌号或车架号二选一填写</span>
    </div>
    <div class="loan_content">

      <div class="choose_loan">
        <div class="choose_list" @click="chooseInput()">
          <img :src="inputOne" class="pay_logo">
          <span>车牌号</span>
        </div>
        <div style="margin-left: 1.8rem" class="choose_list"  @click="chooseInput2()">
          <img :src="inputTwo" class="pay_logo">
          <span>车架号</span>
        </div>
      </div>
      <div style="height: 1px;background: #F2F2F2;margin: 0 .24rem;"></div>
      <yd-cell-item v-if="showPhone" >
        <span slot="left">车架号</span>
        <yd-input slot="right" v-model="input8"  required :show-required-icon="false" :show-success-icon="false" :show-error-icon="false"  placeholder="请输入车架号" style="margin-left: 0.38rem;
"></yd-input>
      </yd-cell-item>
      <yd-cell-item v-if="showId">
        <span slot="left">车牌号</span>
        <yd-input slot="right" v-model="input2" required :show-required-icon="false" :show-success-icon="false" :show-error-icon="false"  placeholder="请输入车牌号" style="margin-left: 0.38rem;
"></yd-input>
      </yd-cell-item>

    </div>
    <div  class="footer_pos">
      <div class="foot_left">
        <span>需付金额：</span><span style="color: red;font-weight: bold; ">￥{{price}}</span>
      </div>
      <div class="foot_right" @click="show2()">
        立即验证
      </div>
    </div>
    <payPart :show-wrap="iswrap" :need-param="param" :product-title="title" :product-price="price" :api-logo="apilogo"></payPart>
  </section>
</template>

<script>
  import payPart from '@/components/api/pay_part';
  export default {
    name:'carDanger',
    data() {
      return {
        input8:'',
        input2:'',
        iswrap:false,
        idReg:'/^\\d{6}(18|19|20)?\\d{2}(0[1-9]|1[012])(0[1-9]|[12]\\d|3[01])\\d{3}(\\d|[xX])$/',
        showId:true,
        showPhone:false,
        inputOne:require('../../assets/api/blue.png'),
        inputTwo:require('../../assets/api/no.png'),
        payway:1,
        param:{},
        title:'车辆出险查询',
        price:'',
        apilogo:'',
      }
    },
    methods:{
      show2(){
        const that = this;
        if(this.showId){
          this.input8 = '';
          if(this.input2 == ''){
            this.$dialog.notify({
              mes: '请输入车牌号',
              timeout: 1500,
            });
            return;
          }
        }else{
          this.input2 = '';
          if(this.input8 == ''){
            this.$dialog.notify({
              mes: '请输入车架号',
              timeout: 1500,
            });
            return;
          }
        }
        let redirectUrl = this.$route.path;
        this.$ajax.post(window.g.apiUrl+'/user/isLog.do')
          .then((response)=> {
            if (response.data.code != 200) {
              this.$dialog.notify({
                mes: '您还未登录，将为您跳转到登录页面',
                timeout: 3000,
                callback: () => {
                  let obj = {};
                  obj.carCode = that.input2;
                  obj.carVin = that.input8;
                  obj.show1 = that.showId;
                  obj.show2 = that.showPhone;
                  obj.url = redirectUrl;
                  sessionStorage.setItem('redirectUrl',JSON.stringify(obj));
                  that.$router.push('/login');
                }
              });
            } else {
              that.param.carCode = that.input2;
              that.param.carVin = that.input8;
              that.param.pid = '32';
              that.iswrap = !that.iswrap;
            }
          }).catch(()=>{
        })
      },
      chooseInput(){
        this.payway = 1;
        this.inputOne = require('../../assets/api/blue.png');
        this.inputTwo = require('../../assets/api/no.png');
        this.showId = true;
        this.showPhone = false;
      },
      chooseInput2(){
        this.payway = 2;
        this.inputOne = require('../../assets/api/no.png');
        this.inputTwo = require('../../assets/api/blue.png');
        this.showId = false;
        this.showPhone = true;
      }
    },
    components:{
      payPart
    },
    created(){
      let that = this;
      let redirectUrl = JSON.parse(sessionStorage.getItem('redirectUrl'));
      if(redirectUrl != null){
        this.input2 = redirectUrl.carCode;
        this.input8 = redirectUrl.carVin;
        this.showId = redirectUrl.show1;
        this.showPhone = redirectUrl.show2;
        sessionStorage.removeItem('redirectUrl');
      }
      this.$ajax.post(window.g.apiUrl+'/alipay/getProduct.do',JSON.stringify({
        type:'B',
      })).then((response)=>{
        if(response.data.code == 200){
          let arr = response.data.data;
          for(var i = 0;i<arr.length;i++){
            if(arr[i].id == '32'){
              that.price = arr[i].price;
              that.apilogo = arr[i].iconurl;
            }
          }
          // that.pid = response.data.data[1].id;
        }else{
          that.$dialog.notify({
            mes: '信息获取超时，请稍后重试',
            timeout: 1500,
          });
        }


      }).catch(()=>{
      })
    },
  }
</script>

<style>
  .banner{
    width: 100%;
    display: block;
  }
  .loan_content{
    box-shadow: 0px 5px 10px rgba(194,194,194,.2);
  }
  .choose_loan{
    display: flex;
    box-shadow: 0px -5px 10px rgba(194,194,194,.2);
    height: 1rem;
    align-items: center;
    padding: 0 .24rem;
  }
  .choose_list{
    display: flex;
    align-items: center;
  }
  .footer_pos{
    width: 100%;
    height: 1rem;
    background: #F5F5F5;
    position: fixed;
    bottom: 0;
    display: flex;
  }
  .foot_left{
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 10px;
  }
  .foot_right{
    width: 2.5rem;
    height: 1rem;
    background: #E72A26;
    color: #fff;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .pay_logo{
    width: 0.5rem;
    height: 0.5rem;
  }
  .pay_content{
    width: 100%;
    position: absolute;
    top: 0;
    bottom: 1rem;
    padding: 0 .24rem;
  }
  .pay_title{
    height: 1rem;
    border-bottom: 1px solid #f2f2f2;
  }
  .pay_center{
    display: flex;
    align-items: center;
    margin-top: .5rem;
    justify-content: center;
  }
  .pay_img{
    width: .4rem;
    height: .4rem;
  }
  .pay_count{
    margin-top: .44rem;
    padding-bottom: .86rem;
    border-bottom: 1px solid #f2f2f2;
    font-weight: bold;
    font-size: .5rem;
  }
  .pay_way{
    width: 100%;
    height: 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #f2f2f2;
  }
  .pay_way div{
    display: flex;
    align-items: center;
  }
  .pay_btn{
    width: 100%;
    height: 1rem;
    position: absolute;
    bottom: 0;
    background: #E72A26;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .choose_tip{
    text-align: left;
    height: .7rem;
    display: flex;
    align-items: center;
    padding-left: .24rem;
    background: #FFF9D9;
  }
  .choose_tip img{
    width: .5rem;
    position: relative;
    top: 1px;
  }
</style>
